<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Eng</title>
    <style>
        * {
            /* margin: 0; */
            /* padding: 0; */
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }

        :root {
            --bg_color: #e5dcdc;
            --main_color: #b8a1a1;
            --price_color: red;
        }

        textarea {
            width: 100%;
            height: 300px;
            padding: 12px;
            font-size: 26px;
            font-family: Consolas, Arial, Helvetica, sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bolder;
            background: #3c3939;
            border: 2px solid #8a7979;
            color: #e5dcdc;
        }

        input {
            width: 100%;
            padding: 12px;
            font-size: 26px;
            font-family: Arial, Helvetica, sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bolder;
            background: #3f433f;
            color: #e5dcdc;
            border: 2px solid #796b6b;
        }

        button {
            font-size: 38px;
            background: #000;
            color: #4bb331;
        }

        select,
        option {
            font-size: 30px;
        }
    </style>
</head>

<body style="background: #0a334f;">
    <h1 style="color: #e5dcdc; text-align: center;">Add.html</h1>
    <h2><a href="/"   style="color: white;"  >首页</a></h2>

    <input type="text"> <br> <br>
    <div>
        <select id="select">
            <option>nulll</option>
            <option>100</option>
            <option selected>200</option>
            <option>300</option>
            <option>400</option>
            <option>500</option>
        </select>
    </div>
    <textarea id="text_area"></textarea> <br><br>
    <button onclick="submit()">submit</button>


    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script>
    var textarea = document.querySelector('textarea');
    textarea.addEventListener('input', (e) => {
        textarea.style.height = '100px';
        textarea.style.height = (e.target.scrollHeight + 20) + 'px';
    });
    function submit() {
        let myselect = document.getElementById("select");
        let index = myselect.selectedIndex;
        let select_value = myselect.options[index].text;
        if (select_value == "nulll") { alert("select 内容不符合"); return false; }

        let text_area_str = document.getElementById("text_area").value;
        if (text_area_str.length < 10) { alert("textarea 内容不符合"); return false; }
        let url = "/add_ajax/new/";
        let method = 'POST';
        // let method='GET';
        let postObj = {
            string_data: text_area_str,
            select_value: select_value,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (xhr.responseText === 'success') {
                    // alert("success");
                    // history.back();
                    location.reload();
                }
            }
        }
    }
</script>

</html>